<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			dialog {
				border: none;
				box-shadow: 0px 2px 6px #999;
				border-radius: 5px;
				transition: all 5s ease-in-out;
			}
			/* 打开对话框时，使用 scale 和 opacity 动画 */
			dialog[open] {
			  opacity: 1;
			  transform: scale(1);
			}
			
			/* 关闭对话框时，使用 scale 和 opacity 动画 */
			dialog:not([open]) {
			  opacity: 0;
			  transform: scale(0.8);
			}
		</style>
	</head>
	<body>
		<h1>Dialog</h1>
		<button id="openBtn">show</button>
		<button id="openBtn2">showModal</button>
		<!-- open 属性 -->
		<dialog id="dialog">
			<form method="dialog">
				<p>我是一个弹窗</p>
				<button id="closeBtn2" value="confirm">confirm</button>
				<button id="closeBtn" value="cancel">cancel</button>
			</form>
		</dialog>
		<script>
			openBtn.addEventListener("click", () => {
				dialog.show();
			});
			openBtn2.addEventListener("click", () => {
				dialog.showModal();
			});
			closeBtn.addEventListener("click", () => {
				dialog.close();
			});
			closeBtn.addEventListener("click", () => {
				dialog.close();
			});
			// 结合form才能拿到值
			dialog.addEventListener("close", () => {
				console.log("用户点击了：", dialog.returnValue);
			});
		</script>
	</body>
</html>